<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="wrapper">
			<ul id="currentUl">
				<li>list item1 <button type="button" class="add">插入</button><button type="button" class="del">删除</button></li>
				<li>list item2 <button type="button" class="add">插入</button><button type="button" class="del">删除</button></li>
				<li>list item3 <button type="button" class="add">插入</button><button type="button" class="del">删除</button></li>
				<li>list item4 <button type="button" class="add">插入</button><button type="button" class="del">删除</button></li>
				<li>list item5 <button type="button" class="add">插入</button><button type="button" class="del">删除</button></li>
			</ul>
			<button type="button" id="btn1">在末尾添加元素</button>
			<button type="button" id="btn2">删除最后一个元素</button>
		</div>
		<script>
			const currentUl = document.getElementById("currentUl");
			const btnAdds = document.getElementsByClassName("add");
			const btnDels = document.querySelectorAll(".del");
			const btn1 = document.getElementById("btn1");
			const btn2 = document.getElementById("btn2");
			currentUl.addEventListener('click',function(e){
				let target = e.target;//获取到发生事件的目标对象
				if(target.classList.contains('add')){
					insertNewLi(target);
					
				}else if(target.className=='del'){
					removeLi(target);
				}
			})
			function insertNewLi(button){
				//新建li元素节点
				const newLi = createNewLi();

				//将新建的li插入到button所在的li之前
				currentUl.insertBefore(newLi,button.parentNode);
			}
			function removeLi(button){
				//删除当前按钮所在的行
				currentUl.removeChild(button.parentNode)
				
			}
			btn1.addEventListener('click',appendLi);
			btn2.addEventListener('click',deleteLast);
			function appendLi(){
				//新建一个li元素节点
				const newLi = createNewLi();
				//将新建的li元素追加到ul的末尾
				currentUl.appendChild(newLi);
				
			}
			function deleteLast(){
				//删除ul中最后一个元素
				currentUl.removeChild(currentUl.lastChild);
			}
			function createNewLi(){
				const newLi = document.createElement('li');
				newLi.innerHTML = '<li>list item new <button type="button" class="add">插入</button><button type="button" class="del">删除</button></li>';
				return newLi;
			}
 			
		</script>
	</body>
</html>